// 设备状态数据
const devices = {
  livingRoomLight: false,
  bedroomLight: false,
  kitchenLight: false,
  livingRoomAC: false,
  securitySystem: true,
};

let temperature = 24.5;
let humidity = 65;
let acTemperature = 25;
let mqttClient = null;
let mqttConnected = false;

// 初始化设备状态显示
function updateDeviceDisplays() {}
function updateActiveDevicesCount() {}
function updateMQTTStatus(connected) {
  const statusElement = document.querySelector(".mqtt-status");
  const statusText = document.getElementById("mqtt-status-text");
  if (connected) {
    statusElement.textContent = "MQTT已连接";
    statusText.textContent = "已连接";
    statusElement.classList.add("connected");
    statusElement.style.backgroundColor = "#d4edda"; // 淡绿色背景
    statusElement.style.color = "#155724"; // 深绿色文字
  } else {
    statusElement.textContent = "MQTT未连接";
    statusText.textContent = "未连接";
    statusElement.classList.remove("connected");
    statusElement.style.backgroundColor = "#f8d7da"; // 淡红色背景
    statusElement.style.color = "#721c24"; // 深红色文字
  }
}
function handleMQTTMessage() {}
function updateSensorData() {
  document.getElementById("temperature").textContent = temperature.toFixed(1);
  document.getElementById("humidity").textContent = humidity.toFixed(1);
}
function switchTab(tabId) {}
// DOM加载完成后执行
document.addEventListener("DOMContentLoaded", function () {
  // 初始化MQTT连接
  connectMQTT();

  // 初始化设备状态显示
  updateDeviceDisplays();
  updateActiveDevicesCount();

  // 主题切换
  // const themeToggle = document.getElementById("themeToggle");
  // themeToggle.addEventListener("click", toggleTheme);

  // 标签页切换
  const navItems = document.querySelectorAll(".nav-item");
  const dashboards = document.querySelectorAll(".dashboard");
  navItems.forEach((item) => {
    item.addEventListener("click", function () {
      const tabId = this.getAttribute("data-tab");
      // 移除所有active类
      navItems.forEach((nav) => nav.classList.remove("active"));
      dashboards.forEach((dash) => dash.classList.remove("active"));

      // 为当前点击项添加active类
      item.classList.add("active");
      document.getElementById(tabId).classList.add("active");
      // switchTab(tabId);
    });
  });

  // 设备开关按钮
  const toggleBtns = document.querySelectorAll(".toggle-btn[data-device]");
  toggleBtns.forEach((btn) => {
    btn.addEventListener("click", function () {
      const device = this.getAttribute("data-device");
      toggleDevice(device);
    });
  });

  // 空调温度控制
  document
    .getElementById("temp-down")
    .addEventListener("click", () => adjustTemperature("down"));
  document
    .getElementById("temp-up")
    .addEventListener("click", () => adjustTemperature("up"));
  document
    .getElementById("climate-temp-down")
    .addEventListener("click", () => adjustTemperature("down"));
  document
    .getElementById("climate-temp-up")
    .addEventListener("click", () => adjustTemperature("up"));

  // 空调开关
  document
    .getElementById("climate-ac-toggle")
    .addEventListener("click", () => toggleDevice("livingRoomAC"));

  // 安全系统开关
  document
    .getElementById("security-toggle-btn")
    .addEventListener("click", () => toggleDevice("securitySystem"));

  // 定期更新传感器数据（模拟实时数据）
  setInterval(updateSensorData, 5000);
});

// 连接MQTT服务器
function connectMQTT() {
  try {
    // 生产环境中请替换为实际的MQTT代理地址
    // const broker = "wss://192.168.10.12:8081";
    // 配置参数
    const config = {
      // WebSocket连接URL (注意使用ws://或wss://)
      brokerUrl: "ws://192.168.203.52:8083/mqtt",
      // 可选的连接选项
      options: {
        clientId: "browser_" + Math.random().toString(16).substr(2, 8),
        username: "", // 如需认证则填写
        password: "", // 如需认证则填写
        clean: true,
        reconnectPeriod: 1000,
        connectTimeout: 10 * 1000,
        keepalive: 30,
      },
      // 默认订阅的主题
      defaultTopic: "test/topic",
      tempHumTopic: "humidity_temp",
      securitySystem: "security_system",
      tvCtl: "tv_ctl",
      fanCtl: "fan_ctl",
    };

    console.log("正在连接至MQTT代理...");

    // 这里模拟MQTT连接，实际应用中使用：
    mqttClient = mqtt.connect(config.brokerUrl, config.options);

    mqttClient.on("connect", () => {
      console.log("MQTT连接成功！");
      mqttConnected = true;
      updateMQTTStatus(true);
      subscribeToTopic(config.defaultTopic);
      subscribeToTopic(config.tempHumTopic);
      subscribeToTopic(config.securitySystem);
      subscribeToTopic(config.tvCtl);
      subscribeToTopic(config.fanCtl);
    });

    // 接收消息
    mqttClient.on("message", function (topic, message) {
      const msg = message.toString();
      console.log(`收到主题 [${topic}] 的消息: ${msg}`);
      if (topic === config.tempHumTopic) {
        //解析th:temp:24:hum:52.0
        const parts = msg.split(":");
        if (parts.length === 5) {
          const temp = parseFloat(parts[2]);
          const hum = parseFloat(parts[4]);
          if (!isNaN(temp) && !isNaN(hum)) {
            temperature = temp;
            humidity = hum;
            updateSensorData();
          }
        }
      }
      // 在这里处理收到的消息
      // 例如更新UI等
    });
    // 重新连接
    mqttClient.on("reconnect", function () {
      console.log("正在尝试重新连接...");
      mqttClient = mqtt.connect(config.brokerUrl, config.options);
    });
    // 断开连接
    mqttClient.on("close", function () {
      console.log("与MQTT服务器断开连接");
      updateMQTTStatus(false);
      mqttClient = mqtt.connect(config.brokerUrl, config.options);
    });
    // 错误处理
    mqttClient.on("error", function (error) {
      console.error("MQTT错误:", error);
      // 可以在这里添加UI提示或其他错误处理逻辑
      updateMQTTStatus(false);
    });
  } catch (error) {
    console.error("发生错误:", error);
  }
}

// 订阅主题
function subscribeToTopic(topic) {
  if (!mqttClient || !mqttClient.connected) {
    console.error("MQTT客户端未连接，无法订阅主题");
    return false;
  }

  mqttClient.subscribe(topic, function (err) {
    if (err) {
      console.error(`订阅主题 [${topic}] 失败:`, err);
    } else {
      console.log(`已成功订阅主题: ${topic}`);
    }
  });
}

// 发布消息
function publishMessage(topic, message) {
  if (!mqttClient || !mqttClient.connected) {
    console.error("MQTT客户端未连接，无法发布消息");
    return false;
  }

  mqttClient.publish(topic, message, function (err) {
    if (err) {
      console.error(`发布到主题 [${topic}] 失败:`, err);
    } else {
      console.log(`已发布消息到主题 [${topic}]: ${message}`);
    }
  });
}

// 断开连接
function disconnectMQTT() {
  if (mqttClient && mqttClient.connected) {
    mqttClient.end();
    console.log("已断开MQTT连接");
  }
}

function setRainbowLightEffect(isActive) {
  // 实现彩虹灯效果的逻辑
  if (isActive) {
    publishMessage("rainbow_led_ctl", "on");
  } else {
    publishMessage("rainbow_led_ctl", "off");
  }
}
//门锁控制
function enableSecuritySystem() {
  // 实现安全系统开启逻辑
  publishMessage("security_system", "on");
}
function disableSecuritySystem() {
  // 实现安全系统关闭逻辑
  publishMessage("security_system", "off");
}
//电视控制
function enableTelevision() {
  // 实现电视开启逻辑
  publishMessage("tv_ctl", "on");
}
function disableTelevision() {
  // 实现电视关闭逻辑
  publishMessage("tv_ctl", "off");
}
function enableFan() {
  // 实现风扇开启逻辑
  publishMessage("fan_ctl", "on");
}
function disableFan() {
  // 实现风扇关闭逻辑
  publishMessage("fan_ctl", "off");
}
function handleDeviceControl(deviceType, isActive) {
  const statusMsg = isActive ? "开启" : "关闭";

  switch (deviceType) {
    case "livingRoomLight":
      console.log(`彩虹灯已${statusMsg}`);
      // 这里可以添加控制彩虹灯的逻辑
      setRainbowLightEffect(isActive);
      break;

    case "television":
      console.log(`电视已${statusMsg}`);
      // 这里可以添加控制卧室灯的逻辑
      if (isActive) {
        // 例如：设置卧室灯亮度、色温等
        enableTelevision();
      } else {
        disableTelevision();
      }
      break;

    case "livingRoomFan":
      console.log(`风扇已${statusMsg}`);
      // 这里可以添加控制客厅空调的逻辑
      if (isActive) {
        // 例如：设置温度、风速等
        enableFan();
      } else {
        disableFan();
      }
      break;

    case "securitySystem":
      console.log(`安全系统已${statusMsg}`);
      // 这里可以添加控制安全系统的逻辑
      if (isActive) {
        enableSecuritySystem();
      } else {
        disableSecuritySystem();
      }
      break;

    default:
      console.log(`未知设备: ${deviceType}`);
  }
}

// 选择所有控制按钮
const controlButtons = document.querySelectorAll(".control-btn");
// 为每个按钮添加点击事件监听器
controlButtons.forEach((button) => {
  button.addEventListener("click", function () {
    // 获取设备类型
    const deviceType = this.getAttribute("data-device");

    // 切换激活状态
    this.classList.toggle("active");

    // 检查当前激活状态
    const isActive = this.classList.contains("active");

    // 根据不同设备类型处理不同逻辑
    handleDeviceControl(deviceType, isActive);
  });
});
